<template>
    <page-layout :avatar="currUser.avatar">
        <div slot="headerContent">
            <div class="title">{{welcome.timeFix[lang]}}，{{currUser.name}}，{{welcome.message[lang]}}</div>
            <div>这是只有开发者才能看的页面哦！</div>
        </div>
        <template slot="extra">
            <head-info class="split-right" :title="$t('ranking')" :content="steps[this.current].title"/>
            <head-info class="split-right" :title="$t('project')" :content="this.current+1"/>
        </template>
        <a-card style="min-height: 58vh;">

            <a-steps :current="this.current">
                <a-step v-for="item in steps" :key="item.card" :title="item.title"/>
            </a-steps>
            <div class="steps-content">
                <component :is="steps[this.current].card"></component>
            </div>

        </a-card>
    </page-layout>
</template>

<script>
  import PageLayout from '@/layouts/PageLayout'
  import HeadInfo from '@/components/tool/HeadInfo'
  import {mapState} from 'vuex'
  import Mock from 'mockjs'
  import FirstCard from './FirstCard'
  import SecondCard from './SecondCard'
  import ThirdlyCard from './ThirdlyCard'

  export default {
    name: 'WorkPlace',
    components: {HeadInfo, PageLayout, FirstCard, SecondCard, ThirdlyCard},
    i18n: require('./i18n'),
    data() {
      return {
        steps: [{
          title: '后端', card: 'FirstCard'
        }, {
          title: '前端', card: 'SecondCard'
        }, {
          title: '结果', card: 'ThirdlyCard'
        }],
        welcome: {
          timeFix: '',
          message: ''
        }
      }
    },
    computed: {
      ...mapState('account', {currUser: 'user'}),
      ...mapState('setting', ['lang']),
      ...mapState('workplace', ['current'])
    },
    created() {
      this.welcome = Mock.mock({
        timeFix: '@TIMEFIX',
        message: '@WELCOME'
      })
    },
    methods: {}
  }
</script>

<style lang="less">
    .steps-content {
        margin-top: 16px;
        text-align: center;
    }
</style>
